<template>
  <div class="excel-import-box">
    <div class="step">
      <div class="dot">
        <div class="line" />
      </div>
      <div class="content">
        <div class="content-title">
          下载导入模板
        </div>
        <div class="down-load">
          <div class="file-name">
            {{ excel.fileName }}
          </div>
          <div class="down-btn" @click="downloadFile">
            <span>下载</span>
            <icon-font type="icon-xiajia" />
          </div>
        </div>
      </div>
    </div>
    <div v-if="selectMonth" class="step">
      <div class="dot">
        <div class="line" />
      </div>
      <div class="content">
        <div class="content-title">
          {{ placeholder }}
        </div>
        <div>
          <a-date-picker
            picker="month" size="large" placeholder="请选择计算月份" style="width: 372px;"
            @change="handleChangeMonth"
          />
        </div>
      </div>
    </div>
    <div class="step">
      <div class="dot" />
      <div class="content">
        <div class="content-title">
          导入数据
        </div>
        <a-upload
          v-if="resultData == null" accept=".xlsx, .xls" :disabled="uploadLoading" name="file" :data="extraData"
          :action="uploadUrl" :headers="{ Authorization: token }" :before-upload="beforeUpload" @change="handleChange"
        >
          <a-button type="primary" size="large" :disabled="disabledUpload" style="width: 372px">
            <span>上传</span>
            <template #icon>
              <icon-font style="font-size: 16px" type="icon-shangjia" />
            </template>
          </a-button>
        </a-upload>
        <div v-else class="success-result">
          <p v-if="resultData.failRows > 0" class="warn">
            请下先下载导入失败数据、根据红色文字提示补充或修改不规范单元格、有导入成功数据时、请勿重复导入同一文件！
          </p>
          <p class="success">
            导入成功条数：{{ resultData.successRows }}
          </p>
        </div>
      </div>
    </div>
    <div v-if="resultData">
      <div v-if="resultData.failRows > 0" class="fail-box">
        <div>导入失败条数：{{ resultData?.failRows }}</div>
        <div>
          <a-button type="primary" danger @click="downloadFailData">
            <template #icon>
              <icon-font style="font-size: 16px" type="icon-xiazai" />
            </template>
            失败数据下载
          </a-button>
        </div>
      </div>
      <div v-else class="px-40px">
        <a-button size="large" style="width: 100%;" type="primary">
          关闭
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue'

const props = defineProps({
  excel: {
    type: Object,
    default: () => ({
      fileName: '导入模板.xlsx',
      downLoadUrl: '',
      api: '',
    }),
  },
  params: {
    type: Object,
    default: () => ({}),
  },
  selectMonth: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: '选择计算月份',
  },
})

const emit = defineEmits(['flush'])

const token = sessionStorage.getItem('token')

const uploadLoading = ref(false)

const resultData = ref(null)

const extraData = reactive({ ...props.params, month: null })

const uploadUrl = computed(() => {
  return `http://localhost:8080${props.excel.api}`
})

const disabledUpload = computed(() => {
  if (props.selectMonth) {
    return extraData.month === null
  }
  return false
})

function handleChangeMonth(val) {
  extraData.month = val ? `${val.format('YYYY-MM')}-20` : null
}

function beforeUpload(file) {
  const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  if (!isExcel) {
    message.error('请上传Excel文件')
    return false
  }
  uploadLoading.value = true
  return true
}

// 下载失败数据
function downloadFile() {
  window.location.href = props.excel.downLoadUrl
}
// 下载失败数据
function downloadFailData() {
  emit('flush', '')
  window.location.href = `${resultData.value.filePath}`
}

function handleChange(info) {
  const status = info.file.status
  if (status === 'done') {
    const { data, msg } = info.file.response
    if (data) {
      resultData.value = data
      if (data.failRows > 0) {
        message.warn(`有${data.failRows}条数据导入失败！`)
      }
      else {
        message.success(`文件导入成功！`)
      }
      emit('flush', data.filePath)
    }
    else {
      resultData.value = null
      uploadLoading.value = false
      message.error(`文件导入失败！${msg}`)
    }
  }
  else if (status === 'error') {
    uploadLoading.value = false
    resultData.value = null
    message.error(`文件导入失败！`)
  }
}
</script>

<style lang="less" scoped>
  .excel-import-box {
  padding: 30px;

  .step {
    display: flex;

    .dot {
      position: relative;
      width: 20px;
      height: 20px;
      margin-top: 4px;
      margin-right: 20px;
      background-color: rgb(22 93 255 / 10%);
      border-radius: 50%;

      &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        content: '';
        background-color: #165dff;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }

      .line {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 1px;
        height: 110px;
        border-left: 0.5px dashed rgb(22 93 255 / 20%);
      }
    }

    .content {
      flex: 1;
      height: 120px;

      .content-title {
        margin-bottom: 15px;
        font-size: 16px;
        font-weight: 500;
        color: #111;
      }

      .down-load {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 46px;
        background: rgb(22 93 255 / 6%);
        border-radius: 4px;

        .file-name {
          height: 46px;
          padding-left: 10px;
          font-size: 14px;
          line-height: 46px;
          color: #777;
        }

        .down-btn {
          width: 86px;
          height: 46px;
          font-size: 14px;
          line-height: 46px;
          color: #165dff;
          text-align: center;
          cursor: pointer;
          background: rgb(22 93 255 / 6%);
          border-radius: 4px;
        }
      }

      .upload {
        width: 372px;
        height: 46px;
        border: 1px solid red;
      }
    }

    .success-result {
      .warn {
        font-size: 13px;
        color: #ffa036;
        // text-align: center;
      }

      .success {
        font-size: 16px;
        color: #03c683;
        text-align: center;
      }
    }
  }

  .fail-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    font-size: 16px;
    color: #fb4246;

    & > div:first-child {
      margin-right: 10px;
    }
  }
}
</style>
